import Link from 'next/link'
import { Tabs, Card, Col, Row, Spin } from 'antd'
import Layout from './../components/Layout'
import LazyLoad from 'react-lazyload'
const { Meta } = Card;

const TabPane = Tabs.TabPane
export default class Bangumi extends React.Component {
  
  static async getInitialProps (req) {
    const res = await fetch('https://www.ikanfan.cn/tool/week.php')
    const json = await res.json()
    return { weekData: json.ResponseData, status: json.ResponseStatus }
  }

  constructor (props) {
    super(props)
    this.state = {
      weekEng: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
      weekDay: new Date().getDay() - 1,
      weekCn: ['一', '二', '三', '四', '五', '六', '日'],
      loading: false
    }
  }

  render () {
    const { weekDay, weekCn, weekEng } = this.state
    const weekData = this.props.weekData || []
    console.log(this.props)
    return (
      <Layout title="动漫">
        <Tabs defaultActiveKey={weekCn[weekDay]}>
          {
            weekCn.map((week, index) =>
              <TabPane tab={week} key={week}>
                <Spin spinning={this.props.status === 0 ? false : true}>
                <Row gutter={16}>
                  {
                    weekData[weekEng[index]].map(item => 
                      <Col span={6} key={item.id}>
                        <Link as={`/detail/${item.id}`} href={{ pathname: '/detail', query: { id: item.id } }}>
                        <a>
                        <Card
                          style={{marginTop: 8, marginBottom: 8}}
                          hoverable
                          cover={<LazyLoad throttle={200} height={350}><img alt={item.title} src={item.vodPic} style={{ height: '350px' }} /></LazyLoad>}
                        >
                          <Meta
                            title={item.title}
                            description={item.isDate ? <p style={{color:'#f60'}}>{item.status === '更新至0话' ? '完结' : item.status}</p> : <p>{item.status === '更新至0话' ? '完结' : item.status}</p>}
                          />
                        </Card>
                        </a>
                        </Link>
                      </Col>
                    )
                  }
                </Row>
                </Spin>
              </TabPane>
            )
          }
        </Tabs>
      </Layout>
    )
  }
}